<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>

</body>
<!-- 传统的JS引入方式 -->
<!-- <script type="text/javascript" src="../js/m1.js"></script> -->

<!-- 模块化引入 引入外部JS script引入外部js时 无法script标签内执行其他代码 -->
<!-- 此种写法仅能引入并执行模块化代码   => 没有办法按需引入 -->
<!-- <script type="module" src="../js/m1.js"></script> -->


<script type="module">
    // 模块化

    // 历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来

    // 在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。


    // 模块化目的(优点):
    // 减少全局变量
    // 将一个大程序拆分成互相依赖的小文件 (每一个文件都是一个单独的模块)
    // 代码复用
    // 按需暴露 按需引入

    // import "../js/m1.js";    // 此种写法仅能引入并执行模块化代码   => 没有办法按需引入

    import { a, addA } from "../js/m1.js";
    import { b, reduceB } from "../js/m2.js";
    import { c, sumC } from "../js/m3.js";

    console.log(a, addA);
    console.log(b, reduceB);
    console.log(c, sumC);

    addA();
    addA();
    addA();
    addA();
    console.log(a);



    reduceB()
    reduceB()
    reduceB()
    reduceB()
    reduceB()
    console.log(b);



    sumC();
    console.log(c);

</script>

</html>